<template>
  <div class="model-results">
    <el-table
      class="border-table"
      :data="tableData"
      style="width: 100%"
      ref="table"
      v-loading="loading"
    >
      <el-table-column
        prop="name"
        label="数据集"
        align="center"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="accuracy"
        label="准确率"
        align="center"
        v-if="showColumn('accuracy')"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="recall"
        label="召回率"
        align="center"
        v-if="showColumn('recall')"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="fl_score"
        label="F1值"
        align="center"
        v-if="showColumn('fl_score')"
        show-overflow-tooltip
      >
      </el-table-column>
      <!--
        <el-table-column
            prop="precision"
            label="精确率"
            align="center"
             v-if="showColumn('precision')"
            show-overflow-tooltip>
        </el-table-column>
        -->
      <el-table-column
        prop="rmse"
        label="均方根误差"
        align="center"
        v-if="showColumn('rmse')"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="r2_score"
        label="拟合优度"
        align="center"
        v-if="showColumn('r2_score')"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="mape"
        label="平均绝对百分比误差"
        align="center"
        v-if="showColumn('mape')"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="mae"
        label="平均绝对误差"
        align="center"
        v-if="showColumn('mae')"
        show-overflow-tooltip
      >
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { has } from 'lodash';
export default {
  name: 'modelResults',
  props: {
    dataList: {
      type: Array,
      default: function () {
        return [];
      }
    },
  },
  data() {
    return {
      loading: false,
    };
  },
  methods: {
    showColumn(index) {
      let result = false,
        dataList = this.dataList;
      if (dataList.length < 1) {
        return result;
      }
      let data = dataList[0];
      if (has(data, index)) {
        result = true;
      }
      return result;
    },
  },
  computed: {
    tableData: function () {
      return this.dataList;
    },
  },
};
</script>
<style lang="scss" scoped>
.model-results {
  position: relative;
  margin: 10px 0px;
}
</style>
